
import React from 'react';
import PropTypes from 'prop-types';
import {injectIntl} from './intl';
import {Card, Row, Col, Table} from 'antd';
import {conventEnumValueToString, formatAmount} from '../utils';
import {packingListType, currency, transportType, packingType} from '../Enum';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
import {TABLE} from '../constants';
const {Description} = DescriptionList;
import styles from './style.css';
/* eslint-disable react/prefer-stateless-function */
const rowKey = record => `${record.partSaleOrderCode}${record.partCode}`;
class Detail extends React.PureComponent {
    render() {
        const {details = []} = this.props.detail;
        let totalQuantity = 0;
        details.forEach(o => {
            totalQuantity += (o.quantity);
        });
        const columns = [
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.partSaleOrderCode',
                    defaultMessage: '销售订单编号'
                }),
                dataIndex: 'partSaleOrderCode',
                render: (value, row) => {
                    const obj = {
                        children: value,
                        props: {},
                    };
                    obj.props.rowSpan = row.rowSpan;
                    return obj;
                }
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.partOrderTypeName',
                    defaultMessage: '订单类型'
                }),
                dataIndex: 'partOrderTypeName',
                render: (text, record) => {
                    const obj = {
                        children: text,
                        props: {},
                    };
                    obj.props.rowSpan = record.rowSpan;
                    return obj;
                }
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.currency',
                    defaultMessage: '币种'
                }),
                dataIndex: 'currency',
                render: (text, record) => {
                    const obj = {
                        children: conventEnumValueToString(currency, text),
                        props: {},
                    };
                    obj.props.rowSpan = record.rowSpan;
                    return obj;
                }
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.transportType',
                    defaultMessage: '运输方式'
                }),
                dataIndex: 'transportType',

                render: (text, record) => {
                    const obj = {
                        children: conventEnumValueToString(transportType, text),
                        props: {},
                    };
                    obj.props.rowSpan = record.rowSpan;
                    return obj;
                }
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.pickingListCode',
                    defaultMessage: '备件备料单号'
                }),
                dataIndex: 'pickingListCode',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.palletCode',
                    defaultMessage: '托盘号'
                }),
                dataIndex: 'palletCode',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.partCode',
                    defaultMessage: '备件编号'
                }),
                dataIndex: 'partCode',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.partName',
                    defaultMessage: '备件名称'
                }),
                dataIndex: 'partName',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.oldPartCode',
                    defaultMessage: '被替换备件编号'
                }),
                dataIndex: 'oldPartCode',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.oldPartName',
                    defaultMessage: '被替换备件名称'
                }),
                dataIndex: 'oldPartName',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.quantity',
                    defaultMessage: '数量'
                }),
                dataIndex: 'quantity',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.price',
                    defaultMessage: '单价'
                }),
                dataIndex: 'price',
                className: styles.textAlign,
                render: text => formatAmount(text)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.totalAmount',
                    defaultMessage: '总价'
                }),
                dataIndex: 'totalAmount',
                className: styles.textAlign,
                render: text => formatAmount(text)
            }
        ];
        return (
            <div>
                <Card>
                    <DescriptionList size="large" title={<Row><Col span={6}>{this.props.intl.formatMessage({
                        id: 'commonDetail.order.title',
                        defaultMessage: '装箱单信息'
                    })}</Col>
                    <Col className={styles.optionBtn} span={18}>{this.props.operations}</Col></Row>}>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.code',
                                defaultMessage: '系统单号'
                            })}>
                            {this.props.detail.code}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.packingType',
                                defaultMessage: '包装类型'
                            })}>
                            {conventEnumValueToString(packingType, this.props.detail.packingType)}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.container',
                                defaultMessage: '包装规格'
                            })}>
                            {this.props.detail.container}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.status',
                                defaultMessage: '状态'
                            })}>
                            {conventEnumValueToString(packingListType, this.props.detail.status)}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.length',
                                defaultMessage: '长度(mm)'
                            })}>
                            {this.props.detail.length}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.width',
                                defaultMessage: '宽度(mm)'
                            })}>
                            {this.props.detail.width}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.height',
                                defaultMessage: '高度(mm)'
                            })}>
                            {this.props.detail.height}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.volume',
                                defaultMessage: '体积(m3)'
                            })}>
                            {formatAmount(this.props.detail.volume, 3)}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.netWeight',
                                defaultMessage: '净重(kg)'
                            })}>
                            {formatAmount(this.props.detail.netWeight, 3)}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.grossWeight',
                                defaultMessage: '毛重(kg)'
                            })}>
                            {formatAmount(this.props.detail.grossWeight, 3)}
                        </Description>
                    </DescriptionList>
                    <DescriptionList col={1} className={styles.mgtp} size="large">
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.info.remark',
                            defaultMessage: '备注'
                        })}>
                            {this.props.detail.remark}
                        </Description>
                    </DescriptionList>
                </Card>
                <Card
                    title={this.props.intl.formatMessage({
                        id: 'commonDetail.details.title',
                        defaultMessage: '装箱单清单'
                    })}
                    bordered={false}>
                    <Table className="white-space-nowrap" rowKey={rowKey} columns={columns} pagination={false} dataSource={details} {...TABLE} />
                    {this.props.intl.formatMessage({
                        id: 'add.text.total',
                        defaultMessage: '总数量:'
                    })}{totalQuantity}
                </Card>
            </div>
        );
    }
}

Detail.defaultProps = {
    detail: {},
};

Detail.propTypes = {
    detail: PropTypes.object,
    intl: PropTypes.object,
    isDetail: PropTypes.bool,
    operations: PropTypes.any,
};
export default injectIntl(Detail);
